<div style="padding: 5px 20px 20px" id="payInfoDialog">
    <form class="layui-form layui-user-from order-detail-tab">
        <!-- 发票信息 -->
        <div class="layui-card">
            <div class="layui-card-header"><strong>发票信息</strong></div>
            <div class="layui-card-body">
                <div class="layui-row">
                    <div class="layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label label-required">发票类型</label>
                            <div class="layui-input-block">
                                <input type="radio" name="biType" lay-filter="biType" value="0" title="增值税专用发票">
                                <input type="radio" name="biType" lay-filter="biType" value="1" checked title="增值税普通发票">
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label label-required">发票抬头</label>
                            <div class="layui-input-block">
                                <input type="text" name="" lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label label-required">纳税人识别号</label>
                            <div class="layui-input-block">
                                <input type="text" name="" lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">税务登记地址</label>
                            <div class="layui-input-block">
                                <input type="text" name="" placeholder="" data-verify="0" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">税务登记电话</label>
                            <div class="layui-input-block">
                                <input type="text" name="" placeholder="" data-verify="0" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">开户银行名称</label>
                            <div class="layui-input-block">
                                <input type="text" name="" placeholder="" data-verify="0" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">开户银行账号</label>
                            <div class="layui-input-block">
                                <input type="text" name="" placeholder="" data-verify="0" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 付款信息 -->
        <div class="layui-card">
            <div class="layui-card-header"><strong>快递信息</strong></div>
            <div class="layui-card-body">
                <div class="layui-row">
                    <div class="layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">收件人</label>
                            <div class="layui-input-block">
                                <input type="text" name="" placeholder="" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">职务</label>
                            <div class="layui-input-block">
                                <input type="text" name="" placeholder="" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">手机</label>
                            <div class="layui-input-block">
                                <input type="text" name="" placeholder="" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">邮件</label>
                            <div class="layui-input-block">
                                <input type="text" name="" placeholder="" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">城市</label>
                            <div class="layui-input-block">
                                <div lay-event="xm-select-city"></div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">地址</label>
                            <div class="layui-input-block">
                                <input type="text" name="" placeholder="" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">邮编</label>
                            <div class="layui-input-block">
                                <input type="text" name="" placeholder="" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">客户公司</label>
                            <div class="layui-input-block">
                                <div lay-event="xm-select-company"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="layui-form-item layui-hide">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="saveBtn">保存</button>
            </div>
        </div>
    </form>
</div>
<script>
    layui.use(['form', 'element', 'utils', 'xmSelect', 'laytpl'], function () {
        var $ = layui.jquery,
            layer = layui.layer,
            form = layui.form,
            element = layui.element,
            utils = layui.utils,
            laytpl = layui.laytpl,
            xmSelect = layui.xmSelect;
        /**
         * 初始化表单，要加上，不然刷新部分组件可能会不加载
         */
        form.render();

        // 当前弹出层，防止ID被覆盖
        var parentIndex = layer.index;

        // 需要xmSelect初始化表单
        var xmSelectUnit = function () {
            this.getCityData(); // 城市
            this.getCompanyData(); // 客户公司
        };
        xmSelectUnit.prototype = {
            initCity: function () {
                var xmSelectCity = xmSelect.render({
                    el: '[lay-event="xm-select-city"]',
                    prop: {
                        name: 'label',
                        value: 'id',
                    },
                    name: 'citys',
                    theme: {
                        color: '#84d0e8',
                    },
                    filterable: true,
                    tree: {
                        show: true,
                        showFolderIcon: true,
                        showLine: true,
                        indent: 20,
                        expandedKeys: [ -3 ],
                        lazy: true
                    },
                    on: function(data){
                        if(data.isAdd){
                            return data.change.slice(0, 1)
                        }
                    },
                    data: []
                });
                return xmSelectCity;
            },
            getCityData: function (val) {
                var that = this;
                utils.Ajax({
                    url: 'api/city.json',
                    dataType: 'json',
                    type: 'post',
                    data: {},
                    success: function (response) {
                        var list = response.data.city;
                        if (Array.isArray(list)) {
                            var initValue = val === undefined ? [] : [val];
                            that.initCity().update({
                                data: list,
                                initValue: initValue
                            })
                        }
                    }
                });
            },
            initCompany: function () {
                var xmSelectCity = xmSelect.render({
                    el: '[lay-event="xm-select-company"]',
                    prop: {
                        name: 'label',
                        value: 'id',
                    },
                    name: 'company',
                    theme: {
                        color: '#84d0e8',
                    },
                    filterable: true,
                    tree: {
                        show: true,
                        showFolderIcon: true,
                        showLine: true,
                        indent: 20,
                        expandedKeys: [ -3 ],
                        lazy: true
                    },
                    on: function(data){
                        if(data.isAdd){
                            return data.change.slice(0, 1)
                        }
                    },
                    data: []
                });
                return xmSelectCity;
            },
            getCompanyData: function (val) {
                var that = this;
                utils.Ajax({
                    url: 'api/city.json',
                    dataType: 'json',
                    type: 'post',
                    data: {},
                    success: function (response) {
                        var list = response.data.city;
                        if (Array.isArray(list)) {
                            var initValue = val === undefined ? [] : [val];
                            that.initCompany().update({
                                data: list,
                                initValue: initValue
                            })
                        }
                    }
                });
            },
        };

        new xmSelectUnit();

        form.on('radio(biType)', function(data){
            var $verify= $('input[data-verify=0]');
            if (data.value == 0) {
                $verify.attr('lay-verify', 'required');
                $verify.parents('.layui-form-item').find('.layui-form-label').addClass('label-required');
            } else {
                $verify.removeAttr('lay-verify');
                $verify.parents('.layui-form-item').find('.layui-form-label').removeClass('label-required');
            }
        });

        //监听提交
        form.on('submit(saveBtn)', function (data) {
            utils.Ajax({
                url: 'api/talent.json',
                dataType: 'json',
                type: 'post',
                data: data.field,
                success: function (response) {
                    layer.msg(response.message, {time: 1000}, function () {
                        layer.close(parentIndex);
                    })
                }
            });

            return false;
        });


    });

</script>
